<template>
  <div class="container">
    <div class="nav" @click="handleCard('bind')">
      <div v-if="!cardFlag">请绑定银行卡</div>
      <div v-else class="hasCard">
        <img v-if="binkCardInfo.bank_logo_url" :src="binkCardInfo.bank_logo_url" alt />
        <img v-else src="../assets/yinglian.png" alt />
        <span>{{binkCardInfo.parentBankName}} {{'('+showCard+')'}}</span>
      </div>
      <van-icon class="icon" name="arrow" />
    </div>
    <div class="content">
      <div class="title">
        <p>{{type === 'top_up' ? '充值金额(元)' : '提现金额(元)'}}</p>
        <p v-if="type !== 'top_up'">
          手续费
          <span v-if="codeParams.money <=0">0.00元</span>
          <span v-else-if="codeParams.money * 0.0035<=2">2.00元</span>
          <span v-else>{{(+codeParams.money * 0.0035).toFixed(2)}}元</span>
        </p>
      </div>
      <div class="input">
        <div>
          <input
            type="number"
            :placeholder="type === 'top_up' ? '请输入充值金额' : '请输入提现金额'"
            v-model="codeParams.money"
          />
        </div>
        <img
          src="../assets/login/delete.png"
          alt="#"
          @click="()=>{this.codeParams.money = ''}"
          v-show="codeParams.money"
        />
      </div>

      <div class="code" v-if="type ==='top_up'">
        <div class="name">
          短信验证
          <input type="number" placeholder="请输入短信验证码" v-model="rechargeParams.code" />
        </div>
        <div class="send_code">
          <span v-if="!downShow" @click="getRechargeCode">获取验证码</span>
          <span v-else class="downNum-btn">重新发送（{{downNum+'s'}}）</span>
        </div>
      </div>
      <p class="text" v-else-if="+codeParams.money <= +accountInfo.usable_capital">
        可用余额
        <span v-show="accountInfo.usable_capital">{{accountInfo.usable_capital +'元'}}</span>
      </p>
      <p class="text" v-else-if="+codeParams.money > +accountInfo.usable_capital">
        <span>输入金额超过可用余额</span>
      </p>
    </div>
    <div
      v-if="type ==='top_up'"
      :class="cardFlag && codeParams.money && rechargeParams.code ? 'top_up active' : 'top_up'"
      @click="_rechargeQuickbuy"
    >立即充值</div>
    <div
      v-else
      :class="codeParams.money && cardFlag && +codeParams.money <= +accountInfo.usable_capital? 'top_up active' : 'top_up'"
      @click="withdrawalHandle"
    >立即提现</div>
    <div class="footer" v-if="type ==='top_up'">
      <div class="name" @click="handleQuota">银行限额</div>
      <div class="inline"></div>
      <div class="name" @click="()=>{this.detailDialog = !this.detailDialog}">充值说明</div>
    </div>
    <div class="footer" v-else>
      <div class="name" @click="()=>{this.detailDialog = !this.detailDialog}">提现说明</div>
    </div>

    <van-dialog
      v-model="topUpDialog"
      class="topup-dialog"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div name="default" class="content">
        <img src="../assets/top_up/top_up.png" alt="#" />
        <div class="text">
          <p>你尚未绑定银行卡</p>
          <p>请前往绑定银行卡后再进行相关操作</p>
        </div>
      </div>
      <div class="footer">
        <div class="enter" @click="handleCard('bind')">去绑定</div>
        <div class="cancel" @click="()=>{this.topUpDialog = !this.topUpDialog}">暂不绑定</div>
      </div>
    </van-dialog>
    <van-dialog
      v-model="detailDialog"
      class="detail-dialog"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div name="title" class="title">{{type === 'top_up' ? '充值说明' : '提现说明'}}</div>
      <div name="default" v-if="type ==='top_up'" class="content">
        <p>1.快捷充值：详看银行限额表</p>
        <p>2.快捷充值默认账户绑定的银行卡进行充值</p>
        <p>3.若要更换已绑定银行卡，请跳转至"银行卡 绑定"页面，进行解绑操作后重新绑定</p>
        <p>4.使用快捷充值，请确保绑定银行卡账户余 额大于充值金额</p>
      </div>
      <div name="default" v-else class="content">
        <p>1. 当天08:00前提现，08:00后到账</p>
        <p>2.当天08:00-24:00期间内，提现实时到账</p>
        <p>3.确保您的银行账号的姓名和网站上的真实姓 名一致</p>
        <p>4.每笔提现金额至少为100元以上 (如：101元)</p>
        <p>5. 提现金额按照0.35%收取手续费，手续费 不足2元时，按2元收取</p>
      </div>
      <div class="footer">
        <div class="enter" @click="()=>{this.detailDialog = !this.detailDialog}">我知道了</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  checkBankCard,
  getLimitList,
  applybindBankcard,
  bindBankcard,
  applyUnbindBankcard,
  unBindBankcard,
  withdrawBuy,
  rechargeBuy,
  rechargeGetquick,
  rechargeQuickbuy,
  getCompanyCard,
  withdrawBuyCompany,
  resendWithdrawCode,
  confirmWithdrawBuyCompany,
  checkSign
} from "@/api/rechargeWithDrawal";
import { getAccount } from "@/api/me";
import { Notify } from "vant";
export default {
  data() {
    return {
      type: "",
      topUpDialog: false, //绑卡提醒 弹窗
      detailDialog: false, //充值说明 弹窗
      cardFlag: false,
      timer: null,
      // 银行卡信息
      binkCardInfo: {
        cardType: "",
        ystMobile: "",
        parentBankName: "",
        bank_logo_url: ""
      },
      showCard: "",
      downShow: false,

      // 发送验证码参数
      codeParams: {
        money: ""
      },
      // 充值参数
      rechargeParams: {
        recharge_id: "",
        code: ""
      },
      downNum: "",
      accountInfo: {}
    };
  },
  watch: {
    maxNum(val) {
      console.log(val);
      if (val > +this.accountInfo.usable_capital) {
        this.codeParams.money = this.accountInfo.usable_capital;
      }
    },
    code(val) {
      console.log(val);
      if (val >= 6) {
        this.rechargeParams.code = val.substring(0, 6);
      }
    }
  },
  computed: {
    maxNum() {
      return this.codeParams.money;
    },
    code() {
      return this.rechargeParams.code;
    }
  },
  created() {
    this.type = this.$route.query.type;
    if (this.type !== "top_up") {
      document.title = "提现";
      this._getAccount();
    }
    this._checkBankCard();
  },
  methods: {
    // 检测和得到绑定银行卡信息（个人OR法人）
    _checkBankCard() {
      checkBankCard().then(res => {
        console.log("检测绑定银行卡信息", res);
        if (res.code == 1) {
          if (res.data) {
            if (res.data.cardType) {
              this.cardFlag = true;
              this.binkCardInfo.cardType = res.data.cardType;
              this.binkCardInfo.parentBankName = res.data.parentBankName;
              this.binkCardInfo.ystMobile = res.data.ystMobile;
              this.binkCardInfo.bank_logo_url = res.data.bank_logo_url;
              let reg = /^(\d{4})\d+(\d{4})$/;
              this.showCard = this.binkCardInfo.cardType.replace(
                reg,
                "$1**********$2"
              );
            }
          }
        } else {
          this.cardFlag = false;
          console.log(res.msg);
        }

        // console.log("银行卡信息", this.binkCardInfo);
      });
    },
    // 获取资金信息
    _getAccount() {
      getAccount().then(res => {
        if (res.code == 1) {
          this.accountInfo = res.data;
          console.log("资金信息", this.accountInfo);
        } else {
          console.log(res.msg);
        }
      });
    },
    // 个人提现申请
    withdrawalHandle() {
      if (!this.cardFlag) {
        this.topUpDialog = true;
      } else if (this.codeParams.money == "") {
        Notify({ type: "warning", message: "请输入提现金额" });
      } else if (+this.codeParams.money > +this.accountInfo.usable_capital) {
        Notify({ type: "warning", message: "可用余额不足" });
      } else if (this.codeParams.money <= 100) {
        Notify({ type: "warning", message: "单次提现金额应为100元以上" });
      } else {
        this.$toast.loading({
          duration: 0,
          message: "提现处理中",
          forbidClick: true,
          loadingType: "spinner"
        });
        let params = {
          money: this.codeParams.money
        };
        withdrawBuy(params)
          .then(res => {
            console.log("个人提现", res);
            if (res.code == 1) {
              window.open(res.data.url, "_self");
            } else {
              Notify({ type: "warning", message: res.msg || "提现失败" });
            }
          })
          .finally(() => {
            this.$toast.clear();
          });
      }
    },
    // 充值-快捷支付-1.发送验证码
    getRechargeCode() {
      if (!this.cardFlag) {
        this.topUpDialog = true;
      } else if (this.codeParams.money == "") {
        Notify({ type: "warning", message: "请输入充值金额" });
      } else {
        console.log("充值快捷支付发送验证码参数", this.codeParams);
        rechargeGetquick(this.codeParams).then(res => {
          console.log("获取快捷充值验证码", res);
          if (res.code == 1) {
            this.countDown();
            this.rechargeParams.recharge_id = res.data.recharge_id;
            Notify({ type: "success", message: "发送成功，请注意查收短信" });
          } else {
            Notify({ type: "warning", message: res.msg || "发送失败" });
          }
        });
      }
    },
    // 充值-快捷支付接口
    _rechargeQuickbuy() {
      if (!this.cardFlag) {
        this.topUpDialog = true;
      } else if (this.codeParams.money == "") {
        Notify({ type: "warning", message: "请输入充值金额" });
      } else if (this.rechargeParams.code == "") {
        Notify({ type: "warning", message: "请输入短信验证码" });
      } else {
        this.$toast.loading({
          duration: 0,
          message: "充值处理中",
          forbidClick: true,
          loadingType: "spinner"
        });
        console.log("快捷充值参数", this.rechargeParams);
        rechargeQuickbuy(this.rechargeParams)
          .then(res => {
            console.log("快捷充值发起支付", res);
            if (res.code == 1) {
              Notify({ type: "success", message: "充值成功，正在为您跳转..." });
              setTimeout(() => {
                this.$router.push({
                  path: "/"
                });
              }, 2000);
            } else {
              Notify({ type: "warning", message: res.msg || "充值失败" });
            }
          })
          .finally(() => {
            this.$toast.clear();
          });
      }
    },

    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 立即充值
    recharge() {},
    // 绑定银行卡
    handleCard(type) {
      this.$router.push({
        path: "/card",
        query: {
          type
        }
      });
    },

    //跳转银行限额页面
    handleQuota() {
      this.$router.push({
        path: "/quota"
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  padding-bottom: 50px;
  background: rgba(237, 237, 237, 1);
  > .nav {
    display: flex;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    height: 110px;
    line-height: 110px;
    text-align: center;
    background-color: #fff;
    font-size: 30px;
    font-weight: 400;
    color: rgba(17, 17, 17, 1);
    padding: 0 32px;
    margin-bottom: 20px;
    > .icon {
      line-height: 108px;
      font-size: 26px;
      color: #bcbcbc;
    }
    .hasCard {
      position: relative;
      img {
        width: 46px;
        height: 46px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      span {
        margin-left: 60px;
      }
    }
  }
  > .content {
    width: 100%;
    background-color: #fff;
    text-align: left;
    padding: 40px 0 0;
    margin-bottom: 90px;
    > .title {
      display: flex;
      justify-content: space-between;
      font-size: 30px;
      font-weight: 400;
      padding: 0 32px;
      color: rgba(153, 153, 153, 1);

      > p:nth-of-type(2) {
        color: #111111;
        > span {
          color: #fe6018;
        }
      }
    }
    > .input {
      display: flex;
      // justify-content: space-between;
      align-content: center;
      padding: 70px 32px;
      border-bottom: 1px solid #f2f2f2;
      div {
        position: relative;
        > input {
          width: 80%;
          margin-left: 60px;
          color: rgba(17, 17, 17, 1);
          font-weight: 400;
          font-size: 60px;
          line-height: 60px;
          padding: 0 20px;
          &::placeholder {
            font-size: 35px;
            padding: 20px 0;
            color: rgba(204, 204, 204, 1);
          }
        }
        &::after {
          content: "￥";
          position: absolute;
          top: 3px;
          left: 0;
          font-size: 60px;
          font-weight: bolder;
          color: rgba(17, 17, 17, 1);
        }
      }
      > img {
        vertical-align: middle;
        margin-top: 16px;
        width: 26px;
        height: 26px;
        margin-left: auto;
      }
    }
    > .code {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40px 32px;
      position: relative;
      > .name {
        font-size: 30px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(17, 17, 17, 1);
        > input {
          padding-left: 30px;
          &::placeholder {
            color: rgba(204, 204, 204, 1);
          }
        }
      }
      > .send_code {
        font-size: 30px;
        color: #387eff;
        position: absolute;
        right: 32px;
        .downNum-btn {
          color: #c0c4cc;
        }
      }
    }
    > .text {
      width: 100%;
      padding: 30px;
      font-size: 30px;
      font-weight: 400;
      color: rgba(17, 17, 17, 1);
      > span {
        color: #fe6018;
      }
    }
  }
  > .top_up {
    width: 650px;
    height: 90px;
    margin: 0 auto;
    line-height: 90px;
    text-align: center;
    background: linear-gradient(
      90deg,
      rgba(255, 212, 154, 1),
      rgba(255, 191, 163, 1)
    );
    border-radius: 4px;
    font-size: 30px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    &.active {
      background: linear-gradient(
        90deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
    }
  }
  > .footer {
    position: fixed;
    left: 50%;
    bottom: 62px;
    transform: translateX(-50%);
    display: flex;
    > .name {
      font-size: 26px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    > .inline {
      width: 2px;
      height: 24px;
      margin: 0 18px;
      background: rgba(204, 204, 204, 1);
    }
  }

  .topup-dialog {
    width: 650px;
    height: 725px;
    padding: 60px 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    .content {
      margin-bottom: 50px;
      > img {
        width: 350px;
        height: 260px;
        margin-bottom: 60px;
      }
      > .text {
        font-size: 30px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 48px;
      }
    }
    .footer {
      > div {
        font-size: 30px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      > div:nth-of-type(1) {
        width: 540px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        margin: 0 auto 28px;
        background: linear-gradient(
          90deg,
          rgba(255, 147, 3, 1),
          rgba(254, 96, 24, 1)
        );
        border-radius: 4px;
      }
    }
  }

  .detail-dialog {
    width: 650px;
    padding: 50px 40px;
    text-align: justify;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    .title {
      font-size: 32px;
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
      text-align: center;
      margin-bottom: 44px;
    }
    .content {
      font-size: 28px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-bottom: 40px;
      > p {
        text-align: justify;
        margin-bottom: 34px;
        line-height: 48px;
        margin-bottom: 10px;
      }
    }
    .footer {
      > .enter {
        width: 550px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        background: linear-gradient(
          90deg,
          rgba(255, 147, 3, 1),
          rgba(254, 96, 24, 1)
        );
        border-radius: 2px;
      }
    }
  }
}
</style>
